<template>
  <div class="index">
    <TopSubfield></TopSubfield>
    <div class="home-cen">
      <centerSearch></centerSearch>
      <centerTop></centerTop>
      <indexCenter></indexCenter>
    </div>
    <bottomSynopsis></bottomSynopsis>
    <broadsideNgn></broadsideNgn>
  </div>
</template>

<script>
import TopSubfield from "@/components/top/TopSubfield";
import indexCenter from "@/components/center/indexCenter";
import centerTop from "@/components/center/centerNavigation/centerTop";

import bottomSynopsis from "@/components/bottom/bottomSynopsis";
import broadsideNgn from "@/components/bottom/broadsideNgn";
import centerSearch from "@/components/top/centerSearch";
export default {
  name: "index",
  components: {
    TopSubfield,
    centerTop,
    bottomSynopsis,
    broadsideNgn,
    centerSearch,
    indexCenter
  },
  data() {
    return {};
  },
  methods: {
    init() {
      const _this=this;
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          _this.showPosition,
          _this.showError
        );
      }
    },
    showPosition(position) {
      // console.log("position:", position);
    },
    showError(error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          console.log("User denied the request for Geolocation");
          break;
        case error.POSITION_UNAVAILABLE:
          console.log("Location information is unavailable");
          break;
        case error.TIMEOUT:
          console.log("The request to get user location timed out");
          break;
        case error.UNKNOWN_ERROR:
          console.log("An unknown error occurred");
          break;
      }
    }
  },
  created() {
    this.init();
  }
};
</script>

<style scoped lang='less'>
.index {
  width: 100%;
  height: 100;
}
.home-cen {
  margin: 0 auto;
  width: 84%; //1210px; 1304
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
</style>
